$loadingThemeList :(
		(
				name: 'primary',
				textColor: var(--vxe-ui-font-primary-color),
				bgColor: var(--vxe-ui-font-primary-tinge-color)
		),
		(
				name: 'success',
				textColor: var(--vxe-ui-status-success-color),
				bgColor: var(--vxe-ui-status-success-tinge-color)
		),
		(
				name: 'info',
				textColor: var(--vxe-ui-status-info-color),
				bgColor: var(--vxe-ui-status-info-tinge-color)
		),
		(
				name: 'warning',
				textColor: var(--vxe-ui-status-warning-color),
				bgColor: var(--vxe-ui-status-warning-tinge-color)
		),
		(
				name: 'danger',
				textColor: var(--vxe-ui-status-danger-color),
				bgColor: var(--vxe-ui-status-danger-tinge-color)
		),
		(
				name: 'error',
				textColor: var(--vxe-ui-status-error-color),
				bgColor: var(--vxe-ui-status-error-tinge-color)
		)
);
.vxe-loading{
	display          :none;
	position         :absolute;
	width            :100%;
	height           :100%;
	top              :0;
	left             :0;
	z-index          :99;
	user-select      :none;
	color            :var(--vxe-ui-loading-color);
	background-color :var(--vxe-ui-loading-background-color);
	.vxe-loading--spinner{
		&:before,
		&:after{
			background-color :var(--vxe-ui-font-primary-color);
		}
	}
	@for $index from 0 to length($loadingThemeList){
		$item :nth($loadingThemeList, $index + 1);
		&.theme--#{map-get($item, name)}{
			color            :map-get($item, textColor);
			background-color :map-get($item, bgColor);
			.vxe-loading--spinner{
				&:before,
				&:after{
					background-color :map-get($item, bgColor);
				}
			}
		}
	}
	&.is--visible{
		display :block;
	}
	& > .vxe-loading--chunk,
	& > .vxe-loading--wrapper{
		width      :100%;
		position   :absolute;
		top        :50%;
		left       :0;
		transform  :translateY(-50%);
		text-align :center;
	}
	.vxe-loading--default-icon{
		font-size :1.4em;
	}
	.vxe-loading--text{
		padding :0.4em 0;
	}
	.vxe-loading--spinner{
		display  :inline-block;
		position :relative;
		width    :56px;
		height   :56px;
		&:before,
		&:after{
			content       :'';
			width         :100%;
			height        :100%;
			border-radius :50%;
			opacity       :0.6;
			position      :absolute;
			top           :0;
			left          :0;
			animation     :bounce 2.0s infinite ease-in-out;
		}
		&:after{
			animation-delay :-1.0s;
		}
	}
	@keyframes bounce{
		0%, 100%{
			transform :scale(0);
		}
		50%{
			transform :scale(1);
		}
	}
}
.size--mini{
	.vxe-loading{
		.vxe-loading--spinner{
			width  :38px;
			height :38px;
		}
	}
}
.size--small{
	.vxe-loading{
		.vxe-loading--spinner{
			width  :44px;
			height :44px;
		}
	}
}
.size--medium{
	.vxe-loading{
		.vxe-loading--spinner{
			width  :50px;
			height :50px;
		}
	}
}